import React, { Component } from 'react';
import {
    View,
    StyleSheet,
    Dimensions,
    FlatList,
    Text,
    TouchableOpacity,
    Image
} from 'react-native';
import { getPixel } from '../common/utils'
import DetailSwiper from './answerSwiper.js'
import { TextInput } from 'react-native-gesture-handler';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer
export default class App extends Component {


    state = {
        width: Dimensions.get('window').width,
        comments: [
        ],
        praised: [
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
            false,
        ],
        Mycomment: '',

    }

    componentWillMount = async () => {
        await fetch(`${this.props.store.ip}/getSubComment?commentId=${this.props.comment.id}&page=0`)
            // 将数据转化成为json格式 反序列化
            .then((response) => response.json())
            .then((respenseJson) => {

                console.log(respenseJson)
                this.setState({ comments: respenseJson }) 
            })
            .catch((error) => { 
                console.error(error);
            });

    }

    insertComment = () => {
        if (this.state.Mycomment === '') {
            alert('你还没输入评论')
        } else {
            var url = `${this.props.store.ip}/insertSubComment`
            var config = {
                method: 'POST',
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                body: "commentId=" + this.props.comment.id + "&contents=" + this.state.Mycomment + "&userId=" + this.props.store.account.userId + "&name=" + this.props.store.account.name 
            }
            // console.log(config.body)
            fetch(url, config).then((response) => response.json())
            this.state.comments.unshift(
                { name: this.props.store.account.name, id: this.props.comment.id, userId: this.props.store.account.userId, contents: this.state.Mycomment, praiseNumber: 0, commentNumber: 0 },
            )
        }
    }


    render() {

        return (
            <View style={{ flex: 1, alignItems: 'center', paddingHorizontal: getPixel(4) }}>
                <View style={{ width: this.state.width - getPixel(16), flexDirection: 'column', backgroundColor: 'white', marginTop: getPixel(10), borderRadius: getPixel(8), paddingVertical: getPixel(10), paddingHorizontal: getPixel(10), shadowOffset: { width: 10, height: 10 }, shadowOpacity: 0.3, elevation: 10 }}>

                    <Text style={{ color: '#333333', fontSize: getPixel(15), fontWeight: 'bold' }}>{this.props.comment.name}</Text>

                    <Text numberOfLines={3} style={{ fontSize: getPixel(15) }}>
                        {this.props.comment.contents}
                    </Text>

                    <View style={{ alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row' }}>

                        <TouchableOpacity onPress={() => {
                        }}>
                            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                                {/* {this.state.praised[index] ? */}
                                {/* <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praised.png')} />  */}
                                <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praise.png')} />
                                {/* } */}
                                <Text style={{ marginLeft: getPixel(5) }}>{this.props.comment.priaseNumber}</Text>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity onPress={() => {
                            this.setState({ praised: !this.state.praised })
                        }}>
                            <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: getPixel(5) }}>

                                <Image style={{ width: getPixel(20), height: getPixel(20), marginLeft: getPixel(10) }} source={require('../../assets/images/comments.png')} />
                                <Text style={{ marginLeft: getPixel(5) }}>{this.props.comment.commentNumber}</Text>
                            </View>
                        </TouchableOpacity>

                    </View>
                </View>

                <FlatList
                    showsVerticalScrollIndicator={false}
                    style={{ flex: 1, width: '100%' }}
                    data={this.state.comments}
                    renderItem={({ item, index }) =>
                        <View key={index} style={{ marginHorizontal: getPixel(4), flexDirection: 'column', backgroundColor: 'white', marginTop: getPixel(10), borderRadius: getPixel(8), paddingVertical: getPixel(10), paddingHorizontal: getPixel(10), shadowOffset: { width: 10, height: 10 }, shadowOpacity: 0.3, elevation: 10 }}>

                            <Text style={{ color: '#333333', fontSize: getPixel(15), fontWeight: 'bold' }}>{item.name}</Text>

                            <Text numberOfLines={3} style={{ fontSize: getPixel(15) }}>
                                {item.contents}
                            </Text>

                            <View style={{ alignItems: 'center', justifyContent: 'flex-end', flexDirection: 'row' }}>

                                <TouchableOpacity onPress={() => {
                                    if (this.state.praised[index]) {
                                        this.state.comments[index].praiseNumber = this.state.comments[index].praiseNumber - 1
                                    } else {
                                        this.state.comments[index].praiseNumber = this.state.comments[index].praiseNumber + 1
                                    }
                                    this.state.praised[index] = !this.state.praised[index]
                                    this.setState({ praised: [...this.state.praised] })
                                }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
                                        {this.state.praised[index] ?
                                            <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praised.png')} /> :
                                            <Image style={{ width: getPixel(20), height: getPixel(20) }} source={require('../../assets/images/praise.png')} />
                                        }
                                        <Text style={{ marginLeft: getPixel(5) }}>{item.priaseNumber}</Text>
                                    </View>
                                </TouchableOpacity>

                                <TouchableOpacity onPress={() => {
                                    this.setState({ praised: !this.state.praised })
                                }}>
                                    <View style={{ flexDirection: 'row', alignItems: 'flex-end', marginLeft: getPixel(5) }}>

                                        <Image style={{ width: getPixel(20), height: getPixel(20), marginLeft: getPixel(10) }} source={require('../../assets/images/comments.png')} />
                                        <Text style={{ marginLeft: getPixel(5) }}>{item.commentNumber}</Text>
                                    </View>
                                </TouchableOpacity>

                            </View>
                        </View>
                    }
                />
                <View style={{ width: '100%', backgroundColor: 'white', paddingHorizontal: getPixel(4) }}>
                    <TextInput
                        ref={ref => this._textInput = ref}
                        placeholder='请输入你的评论'
                        multiline={true}
                        style={{ paddingHorizontal: getPixel(8), paddingVertical: getPixel(0), width: '100%', borderWidth: getPixel(2), borderColor: '#ccc', borderRadius: getPixel(20), fontSize: getPixel(14), }}
                        value={this.state.Mycomment}
                        onChangeText={(text) => {
                            this.setState({ Mycomment: text })
                        }}
                        onSubmitEditing={() => {
                            this.insertComment()
                            // this.setState({ Mycomment: '' })
                            this._textInput.clear()
                            this._textInput.blur();
                        }}
                    />
                </View>





            </View >
        );
    }
}

const styles = StyleSheet.create({
    text: {
        marginLeft: 15,
        padding: 5,
        fontSize: 20,
    }
})
